
<div id="home">
	<div class="col-sm-9 col-md-9 product">

		<script>
			$(function() {
				//未启用数量
				var bootNumber = 0;
				//待机数量
				var standyNumber = 0;
				//运行数量
				var runNumber = 0;
				//停机数量
				var downtimeNumber = 0;
				//故障数量
				var faultNumber = 0;
				//失效数量
				var failureNumber = 0;

				var totalNumber = 0
				$.ajax({
					type : "get",
					url : "../equipment/standyNumber",
					success : function(obj) {
						if (obj.code == 1) {

							standyNumber = obj.data;
							totalNumber += standyNumber;
							$(".awaitNum").text(standyNumber + "台");

						}
					}
				});
				$.ajax({
					type : "get",
					url : "../equipment/bootNumber",
					success : function(obj) {
						if (obj.code == 1) {
							bootNumber = obj.data;
							totalNumber += bootNumber;
						}
					}
				});

				//获取待机数量 

				//获取故障数量
				$.ajax({
					type : "get",
					url : "../equipment/faultNumber",
					success : function(obj) {
						if (obj.code == 1) {
							faultNumber = obj.data;
							totalNumber += faultNumber;
							$(".breakdownNum").text(faultNumber + "台");
						}
					}
				});
				//获取运行数量
				$.ajax({
					type : "get",
					url : "../equipment/runNumber",
					success : function(obj) {
						if (obj.code == 1) {
							runNumber = obj.data;
							totalNumber += runNumber;
							$(".worktNum").text(runNumber + "台");
						}
					}
				});
				//获取停机数量
				$.ajax({
					type : "get",
					url : "../equipment/downtimeNumber",
					success : function(obj) {
						if (obj.code == 1) {

							downtimeNumber = obj.data;
							totalNumber += downtimeNumber;
						}
					}
				});
				//获取失效数量
				$.ajax({
					type : "get",
					url : "../equipment/failureNumber",
					success : function(obj) {
						if (obj.code == 1) {
							failureNumber = obj.data;
							totalNumber += failureNumber;

						}
					}
				});
				//获取开机率
				$
						.ajax({
							type : "get",
							url : "../equipment/startRate",
							success : function(obj) {
								if (obj.code == 1) {

									var degree = 3.6 * obj.data;
									var rate = obj.data;

									$(".starting_block").find(".yuan_text")
											.text(rate + "%");
									if (degree > 180) {
										$(".starting_block")
												.find(".yuan_right").hide();
										var degree = degree - 180;
										$(".starting_block").find(".yuan_left")
												.attr(
														"style",
														"transform: rotate("
																+ degree
																+ "deg);");
									} else {
										$(".starting_block")
												.find(".yuan_right").attr(
														"style",
														"transform: rotate("
																+ degree
																+ "deg);");
									}
									;
								}

							}
						});
				//获取故障率
				$.ajax({
					type : "get",
					url : "../equipment/faultRate",
					success : function(obj) {
						console.log(123214124);
						if (obj.code == 1) {
							var degree = 3.6 * obj.data;
							var rate = obj.data;

							$(".breakdown_block").find(".yuan_text").text(
									rate + "%");
							if (degree > 180) {
								$(".breakdown_block").find(".yuan_right")
										.hide();
								var degree = degree - 180;
								$(".breakdown_block").find(".yuan_left")
										.attr(
												"style",
												"transform: rotate(" + degree
														+ "deg);");
							} else {
								$(".breakdown_block").find(".yuan_right")
										.attr(
												"style",
												"transform: rotate(" + degree
														+ "deg);");
							}
							;
						}

					}
				});
				$
						.ajax({
							type : "get",
							url : "../equipment/runNumberRate",
							success : function(obj) {
								var degree = 3.6 * obj.data;
								var rate = obj.data;
								$(".working_block").find(".yuan_text").text(
										rate + "%");
								if (degree > 180) {
									$(".working_block").find(".yuan_right")
											.hide();
									var degree = degree - 180;
									$(".working_block").find(".yuan_left")
											.attr(
													"style",
													"transform: rotate("
															+ degree + "deg);");
								} else {
									$(".working_block").find(".yuan_right")
											.attr(
													"style",
													"transform: rotate("
															+ degree + "deg);");
								}
								;
							}
						});

				$.ajax({
					type : "get",
					url : "../equipment/syntheticalRate",
					success : function(obj) {
						var degree = 3.6 * obj.data;
						var rate = obj.data;
						$(".synthetical_block").find(".yuan_text").text(
								rate + "%");
						if (degree > 180) {
							$(".synthetical_block").find(".yuan_right").hide();
							var degree = degree - 180;
							$(".synthetical_block").find(".yuan_left").attr(
									"style",
									"transform: rotate(" + degree + "deg);");
						} else {
							$(".synthetical_block").find(".yuan_right").attr(
									"style",
									"transform: rotate(" + degree + "deg);");
						}
						;
					}
				});

			});
		</script>
		<style>
body {
	margin: 0;
	padding: 0;
}

.yuan {
	width: 160px;
	height: 160px;
	text-align: center;
	background-color: orange;
	position: relative;
	border-radius: 50%;
}

.yuan_text {
	width: 100px;
	height: 100px;
	line-height: 100px;
	color: #FF7F4C;
	font-size: 24px;
	font-family: "PingFangSC-Thin", "sans-serif", "STHeitiSC-Light", "微软雅黑",
		"Microsoft YaHei";
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 30px;
	left: 30px;
}

.left_block, .right_block {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	overflow: hidden;
}

.left_block {
	clip: rect(0px, 80px, 160px, 0px);
}

.right_block {
	clip: rect(0px, 160px, 160px, 80px);
}

.yuan_right {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: gainsboro;
	text-align: center;
	clip: rect(0px, 160px, 160px, 80px);
	/*transform:rotate(50deg);*/
}

.yuan_left {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: gainsboro;
	text-align: center;
	clip: rect(0px, 80px, 160px, 0px);
	/*transform:rotate(50deg);*/
}

.starting_block, .breakdown_block, .working_block, .synthetical_block {
	margin-left: 6px;
	width: 170px;
	height: 200px;
	float: left;
	text-align: center;
	font-family: "PingFangSC-Thin", "sans-serif", "STHeitiSC-Light", "微软雅黑",
		"Microsoft YaHei";
	font-size: 24px;
}

.modal-content {
	font-family: "PingFangSC-Thin", "sans-serif", "STHeitiSC-Light", "微软雅黑",
		"Microsoft YaHei";
	font-size: 24px;
}

.btn_position {
	position: absolute;
	top: 120%;
	left: 40%;
}
</style>



		<div class="starting_block">
			<div class="yuan">
				<div class="right_block">
					<div class="yuan_right"></div>
				</div>
				<div class="left_block">
					<div class="yuan_left"></div>
				</div>
				<div class="yuan_text"></div>
			</div>
			开机率
		</div>

		<div class="breakdown_block" style="color: red;">
			<div class="yuan">
				<div class="right_block">
					<div class="yuan_right"></div>
				</div>
				<div class="left_block">
					<div class="yuan_left"></div>
				</div>
				<div class="yuan_text"></div>
			</div>
			故障率
		</div>

		<div class="working_block">
			<div class="yuan">
				<div class="right_block">
					<div class="yuan_right"></div>
				</div>
				<div class="left_block">
					<div class="yuan_left"></div>
				</div>
				<div class="yuan_text"></div>
			</div>
			运行率
		</div>

		<div class="synthetical_block">
			<div class="yuan">
				<div class="right_block">
					<div class="yuan_right"></div>
				</div>
				<div class="left_block">
					<div class="yuan_left"></div>
				</div>
				<div class="yuan_text"></div>
			</div>
			综合率
		</div>
		<!--
        	作者：luois
        	时间：2018-11-27
        	描述：模态框
        -->
		<div class="btn_position">
			<button type="button" class="btn btn-primary" data-toggle="modal"
				data-target=".bs-example-modal-sm">详情</button>

		</div>
		<div class="modal fade bs-example-modal-sm" tabindex="-1"
			role="dialog" aria-labelledby="mySmallModalLabel">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content">
					<p>
						待机数量:<span class="awaitNum"></span>
					</p>
					<p>
						运行数量:<span class="worktNum"></span>
					</p>
					<p>
						故障数量:<span class="breakdownNum"></span>
					</p>

				</div>
			</div>
		</div>





		<div class="page" data-src="../model/page.htm"></div>
	</div>

</div>


